<template>
  <div class="table-container">
    <div class="table-com">
      <div class="table-header" v-if="name !== ''">
        <b class="left">{{name}}</b>
        <div class="right header-right clear">
          <slot name="header-right"></slot>
        </div>
      </div>
      <div class="table" :style="{'padding-top': `${pt}px`}" :class="{noPadding: noPadding}">
        <table cellspacing="0" cellpadding="0">
          <!--标题-->
          <tr>
            <th v-for="items in title" :style="{ width: items.width, 'text-align': items.align }">
              <zz-check
                v-if="items.name === 'check'"
                @handleChange="handleAllCall"
                :check = titleCheck
                :checkTip="items.checkTip"></zz-check>
              <p v-else>{{items.name}}</p>
            </th>
          </tr>

          <tr v-if="dataList.length === 0">
            <td :colspan=title.length style="text-align: center">
              <p><i class="iconfont icon-warning"></i>暂无数据</p>
            </td>
          </tr>
          <!--列表-->
          <tr v-else v-for="(items, index) in dataList">
            <td
              v-for="(value, key, tdindex) in items"
              :style="{'text-align': textAlign(title, tdindex), textOverflow: key === 'check' ? 'clip' : 'ellipsis', overflow: key === 'check' || key === 'auto' || key === 'autos' ? 'visible' : 'hidden'}"
              v-if="key !== 'specialdata'">
              <zz-check v-if="key === 'check'"
                        :tableItem = items
                        :data = value.checkData
                        :check = value.check
                        @handleChange="handleLoneCall"></zz-check>
              <router-link
                v-else-if="key === 'link'"
                :title="value.name"
                :to="{name: value.route, query: { id: value.id, data: value.data }}">{{value.name}}</router-link>

              <router-link
                v-else-if="key === 'linkStatistics'"
                :title="value.name"
                :to="{name: value.route, query: { id: value.id, data: value.data, detailFrom: value.detailFrom, backPath: value.backPath }}">{{value.name}}</router-link>

              <zz-preview
                style="margin-top: 13px"
                width= "30px"
                :isTable=true
                v-else-if="key === 'icon'  || key === 'icons' " :item = value></zz-preview>

              <p v-else-if="key === 'size'" :title="value">{{value | formatSize}}</p>

              <p v-else-if="key === 'count'" :title="value">{{value | accounting}}</p>
              <p v-else-if="key === 'counts'" :title="value">{{value | accounting}}</p>

              <input
                v-else-if="key === 'edit' || key === 'edits'"
                v-model="value.value"
                :style="{width: value.width || '100%'}"
                v-validation="{input: true, type: value.type}"
                :placeholder="value.value || '请输入值'"
                @change="handleBlur(items, value, $event)">

              <p v-else-if="key === 'color'" :title="value" style="color: #ff5e1d">{{value}}</p>

              <p v-else-if="key === 'colors'" v-tooltip="value.tip" style="color: #ff5e1d" :class="{noWhiteSpace: noWhiteSpace}">
                  <span
                    :style="{'color': value.color}">
                    {{value.name}}
                  </span>
              </p>

              <p v-else-if="key === 'date' || key === 'dates'" :title="value | date">{{value | date}}</p>

              <p v-else-if="key === 'moveAllHandle'">
                  <span class="handle-td"
                        v-for="child in value"
                        :style="{'color': child.color}"
                        @click="tdClick(child,dataList[index-1],dataList[index+1])">{{child.name}}</span>
              </p>

              <p v-else-if="key === 'handle' || key === 'handles'|| key === 'handless' " style="z-index: 6;position: relative;">
                  <span class="handle-td"
                        v-for="child in value"
                        :style="{'color': child.color}"
                        @click="tdClick(child)">
                        <zz-select
                          v-if="child.select"
                          style="line-height: 40px"
                          :isFixed=true
                          type="more"
                          :data = "child.selectData"
                          :options="{width: child.width}"
                          :optionColor = "child.color"
                          :option="child.selectList"
                          :name = "child.selectName"
                          @optionClick="handleselectCallback">
                        </zz-select>
                        <span v-else>{{child.name}}</span>
                  </span>
              </p>

              <p v-else-if="key === 'iconFont' || key === 'iconFonts'">
                <i
                  class="iconfont"
                  v-for="fontData in value"
                  v-tooltip="fontData.tip"
                  :class="`icon-${fontData.font}`"
                  :style="{'color': fontData.color}"
                  @click="tdClick(fontData)">{{fontData.name}}</i>
              </p>

              <p v-else-if="key === 'select'">
                <zz-select
                  style="width: 100%; line-height: 40px"
                  :isFixed=true
                  :data = "index"
                  :options="{width: '100%'}"
                  :option="value.selectList"
                  :name = "value.selectName"
                  @optionClick="selectCallback">
                </zz-select>
              </p>

              <p v-else-if="key === 'selects'">
                <zz-select
                  style="width: 65%; line-height: 40px"
                  :isFixed=true
                  :data = "index"
                  :options="{width: '100%'}"
                  :option="value.selectList"
                  :name = "value.selectName"
                  @optionClick="selectsCallback">
                </zz-select>
                <input
                  style="width: 20%;"
                  v-if="value.isShowInput"
                  v-model="value.selectInput"
                  @change="selectInputhandle(items, value, $event)">
                <span style="line-height: 40px" v-if="value.isShowInput">{{value.inputType}}</span>
              </p>

              <p v-else-if="key === 'photo'" style="height: 60px">
                <zz-preview
                  margin="10px 10px 0 0"
                  v-for="file in value"
                  v-if="value.length < 4"
                  :item="file"
                  :info=true
                  :key="file.id"
                  :isAuth = false
                  :isFilling = true
                  :th = 4
                  height="36px"
                  width="36px"></zz-preview>
                <zz-preview
                  margin="10px 10px 0 0"
                  v-for="file in 3"
                  v-if="value.length > 3 && value[file]"
                  :item="value[file]"
                  :info=true
                  :key="file"
                  :isAuth = false
                  :isFilling = true
                  :th = 4
                  height="36px"
                  width="36px"></zz-preview>
                <span v-if="value.length > 3" class="table_export" @click="openMoredialog(value)">更多</span>
              </p>

              <p v-else-if="key === 'mleft'" style="margin-left: 10px" :title="value">{{value}}</p>

              <p v-else-if="key === 'manInfo'">
                <zz-preview
                  v-if="value.photo"
                  width= "25px"
                  height= "25px"
                  :isTable=true
                  style="vertical-align: middle"
                  :item = value.photo></zz-preview>
                <span>{{value.name}}</span>
                <span class="right" v-if="value.info" :style="{color: `${value.info.color}`}">{{value.info.message}}</span>
                <i class="right iconfont" v-if="value.icon" :class="`icon-${value.icon.value}`" :style="{color: `${value.icon.color}`}"></i>
              </p>

              <p v-else-if="key === 'iconTip'">
                <span style="width: 85%; display: inline-block; vertical-align: middle" class="ellipsis" :style="{width: value.width || '85%'}">{{value.name}}</span>
                <i
                  class="iconfont"
                  style="vertical-align: middle;"
                  v-for="fontData in value"
                  :class="`icon-${fontData.font}`"
                  :style="{'color': fontData.color, 'float': fontData.position, 'font-size': fontData.fontSize || '18px', 'margin-right': fontData.mr}"></i>
              </p>

              <p v-else-if="key === 'customize'" v-html="value"></p>

              <zz-auto
                v-else-if="key === 'auto'"
                width= "100%"
                :dataObj="index"
                :isFixed="true"
                :placeholder="value.placeholder"
                :label="value.label"
                :query="value.query"
                :constant = "value.constant"
                :url = "value.url"
                :onSelect="onSelect">
              </zz-auto>

              <zz-auto
                v-else-if="key === 'autos'"
                width= "100%"
                :dataObj="index"
                :isFixed="true"
                :placeholder="value.placeholder"
                :label="value.label"
                :query="value.query"
                :constant = "value.constant"
                :url = "value.url"
                :onSelect="onSelects">
              </zz-auto>

              <p v-else-if="key === 'fontBold'" style="font-weight: bold;" :title="value">{{value}}</p>

              <p v-else :title="value">
                <span v-if="Object.prototype.toString.call(value) === '[object Object]'" v-html="value.customize"></span>
                <span v-else>{{value}}</span>
              </p>
            </td>
          </tr>
          <!--导出-->
          <tr v-if="showRemark || tableExport">
            <td :colspan=title.length class="table-bottom">
              <div v-if="showRemark" class="left">{{tableRemark}}</div>
              <p v-if="tableExport" class="table_export right" @click.self = "exportHanled">导出数据</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <moredialog
      :visible="visible"
      :itemList="photoList"
      @close="closeMoredialog()">
    </moredialog>
  </div>
</template>

<script>
  import moredialog from './moredialog.vue'
  export default {
    name: 'zz-table',
    data () {
      return {
        show: false,
        titleCheck: false,
        dataMap: new Set(),
        visible: false,
        photoList: {}
      }
    },
    components: {
      moredialog
    },
    props: {
      name: {
        type: String,
        default: ''
      },
      title: {
        type: Array,
        default: [
          {name: '姓名', align: 'left'},
          {name: '表头1', align: 'left'},
          {name: '表头2', align: 'left'},
          {name: '表头3', align: 'left'},
          {name: '表头4', align: 'left'}]
      },
      dataList: {
        type: Array,
        default: function () {
          return []
        }
      },
      tableExport: {
        default: false
      },
      showRemark: {
        default: false
      },
      tableRemark: {
        type: String,
        default: ''
      },
      pt: {
        type: Number,
        default: 0
      },
      noPadding: {
        type: Boolean,
        default: false
      },
      // 是否需要清空选中的数据
      isClear: {
        type: Boolean,
        default: true
      },
      // 颜色区分td 是否换行显示
      noWhiteSpace: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      dataList (items) {
        if (this.isClear) {
          this.dataMap.clear()
        }
        items.forEach(item => {
          if (item.check && item.check.check) {
            this.handleLoneDefault(item)
          }
        })
        this.titleCheck = false
      }
    },
    methods: {
      textAlign (title, tdindex) {
        if (!title[tdindex]) {
          return 'left'
        } else {
          return title[tdindex].align
        }
      },
      exportHanled () {
        this.$emit('exportHanled')
      },
      // 设置默认选中数据
      handleLoneDefault (obj) {
        this.dataMap.add(obj.check.checkData)
        this.$emit('handleLoneCall', [...this.dataMap.values()])
      },
      handleLoneCall (obj) {
        const {state, value, tableData} = obj
        tableData.check.check = state
        if (state) {
          this.dataMap.add(value)
          this.$emit('handleLoneCall', [...this.dataMap.values()])
        } else {
          this.dataMap.delete(value)
          this.$emit('handleLoneCall', [...this.dataMap.values()])
        }
      },
      handleAllCall (state) {
        this.titleCheck = state
        this.dataList.forEach(el => {
          if (el.check) {
            el.check.check = state
            this.dataMap.add(el.check.checkData)
          }
        })
        if (state) {
          this.$emit('handleAllCall', [...this.dataMap.values()])
        } else {
          this.dataMap.clear()
          this.$emit('handleAllCall', [...this.dataMap.values()])
        }
      },
      tdClick (node, prev, next) {
        if (prev || next) {
          this.$emit('handle', node, prev, next)
        } else {
          this.$emit('handle', node)
        }
      },
      handleBlur (itemData, old, event) {
        let item = itemData.checkData
        let value = event.target.value
        if (value && old.value !== value) {
          this.$emit('handleBlur', {item, value})
        }
      },
      selectInputhandle (itemData, old, event) {
        let value = event.target.value
        if (value && old.value !== value) {
          this.$emit('selectInputhandle', value)
        }
      },
      openMoredialog (value) {
        this.visible = true
        this.photoList = value
      },
      closeMoredialog () {
        this.visible = false
      },
      handleselectCallback (item) {
        this.tdClick(item)
      },
      selectCallback (item) {
        this.$emit('selectCallback', item)
      },
      selectsCallback (item) {
        if (item.key === '2') {
          this.dataList[item.value].selects.isShowInput = true
        } else {
          this.dataList[item.value].selects.isShowInput = false
        }
        this.$emit('selectsCallback', item)
      },
      onSelect (item) {
        this.$emit('onSelect', item)
      },
      onSelects (item) {
        this.$emit('onSelects', item)
      }
    }
  }
</script>

<style lang="scss">
  .table-container{
    min-height: 30px;
    background: #fff;
    border-radius: 3px;
    .table-com{
      width: 100%;
      .table-header{
        font-size: $font-size-small;
        line-height: $font-size-small;
        height: 25px;
        padding:8px 18px;
        .header-right{
          >div {
            vertical-align: top;
          }
        }
        b{
          margin-top: 8px;
        }
      }
      .noPadding{
        padding:0 ;
      }
      .checked{
        vertical-align: middle;
      }
      .noWhiteSpace{
        white-space: normal;
      }
    }
    .table-bottom{
      border-top: 1px $color-line solid;
    }
  }
</style>
